<template>
  <!-- 第五屏 宽带行业对标系统分析展示 -->
  <div class="containerWrap">
    <el-row class="commonHeader">
      <div>宽带行业对标系统分析展示</div>
    </el-row>
    <el-row :gutter="20" class="fiveContainer">
      <!-- 左侧 -->
      <el-col :span="12">
        <!-- 上半部分: 左表, 次数, 动画, 右表 -->
        <el-row>
          <!-- 左表 -->
          <el-col style="width: 49%" class="fiveTableLeft">
            <TableLeft :dataList="dataListLeft"/>
          </el-col>
          <!-- 次数, 动画, 右表 -->
          <el-col style="width: 49%;margin-left: 2%">
            <el-row class="common-card">
              <!-- 次数 -->
              <el-row type="flex">
                <el-col style="width:50px;height: 92px;line-height: 30px;color:#00DDFF;font-weight: bold;font-size: 20px">
                  拨测<br>次数
                </el-col>
                <el-col style="width: calc(100% - 80px);padding-top: 8px">
                  <NumberFlip :num="num"/>
                </el-col>
              </el-row>
              <!-- 动画 -->
              <el-row style="color:#FFFFFF">
                <!-- 文字，点，线 -->
                <el-col :span="16">
                  <!-- 联通 -->
                  <el-row class="pointWrap">
                    <el-col style="width: 30%">
                      联通
                    </el-col>
                    <el-col style="width: 48px;">
                      <Point/>
                    </el-col>
                    <el-col class="processWrap">
                      <ProcessGreen :lt="ltTestCount"/>
                    </el-col>
                  </el-row>
                  <!-- 电信 -->
                  <el-row class="pointWrap">
                    <el-col style="width: 30%">
                      电信
                    </el-col>
                    <el-col style="width: 48px;">
                      <Point/>
                    </el-col>
                    <el-col class="processWrap">
                      <ProcessBlue :dx="dxTestCount"/>
                    </el-col>
                  </el-row>
                  <!-- 移动 -->
                  <el-row class="pointWrap">
                    <el-col style="width: 30%">
                      移动
                    </el-col>
                    <el-col style="width: 48px;">
                      <Point/>
                    </el-col>
                    <el-col class="processWrap">
                      <ProcessOrange :yd="ydTestCount"/>
                    </el-col>
                  </el-row>
                </el-col>
                <!-- 地球图标 -->
                <el-col :span="8">
                  <Earth/>
                </el-col>
              </el-row>
            </el-row>
            <!-- 右表 -->
            <el-row>
              <TableRight :dataList="dataListRight"/>
            </el-row>
          </el-col>
        </el-row>
        <!-- 下半部分: 折线图 -->
        <LinePart class="common-mt2vh"/>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="12">
        <TopBar/>
        <Bar class="common-mt2vh"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProcessGreen from './components/ProcessGreen'
import ProcessBlue from './components/ProcessBlue'
import ProcessOrange from './components/ProcessOrange'
import Point from './components/Point'
import Earth from './components/Earth'
import TableLeft from './components/TableLeft'
import TableRight from './components/TableRight'
import TopBar from './components/TopBar'
import LinePart from './components/Line'
import Bar from './components/Bar'
import NumberFlip from '@c/numberFlip'
import apiUrl from '@/config'

  export default {
    name: 'Benchmarking',
    components: {
      ProcessGreen,
      ProcessBlue,
      ProcessOrange,
      Point,
      Earth,
      TableLeft,
      TableRight,
      TopBar,
      LinePart,
      Bar,
      NumberFlip
    },
    data() {
      return {
        baseURL: process.env.NODE_ENV === 'production' ? apiUrl.apiUrl.devUrl : apiUrl.apiUrl.testUrl, // 生产
        num: 0,
        ltTestCount: 0,
        dxTestCount: 0,
        ydTestCount: 0,
        query: {
          user_level: null,
          user_code: ''
        },
        range: [],
        dataListLeft: [],
        dataListRight: [],
        gateway_quantity: 0,
        dial_test_time: 0,
        manage_quantity: 0,
        data_month: 0,
        tableDataType: 10,
        tableRightDest: '全部'
      }
    },
    created() {
      this.$bus.$off('tableTypeChange')
      this.$bus.$off('tableRightDestChanged')
      this.$bus.$on('tableTypeChange', this.tableTypeChange)
      this.$bus.$on('tableRightDestChanged', this.tableRightDestChanged)
    },
    mounted() {
      this.repeatInFive()
    },
    // 离开页面结束循环
    beforeRouteLeave(to, from, next) {
      if (this.timer) {
        clearInterval(this.timer)
      }
      next()
    },
    methods: {
      currentPageChangeLeft(val) {
        this.currentPageLeft = val
      },
      repeatInFive() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.init()
        this.timer = setInterval(() => {
          this.init()
        }, 1000 * 60 * 5)
      },
      // 右表全换目标
      tableRightDestChanged(value) {
        this.tableRightDest = value
        this.getTableRightData(this.tableDataType, value)
      },
      // 左表切换日期范围
      tableTypeChange(value) {
        this.tableDataType = value
        this.getTableLeftData(value)
        this.getTableRightData(value, this.tableRightDest)
      },
      init(){
        this.getTableLeftData()
        this.getTableRightData()
        this.getTestCount()
      },
      // 左表数据
      getTableLeftData(val=10) {
        this.$axios.get(`${this.baseURL}/api/benchmarking/thirdNetLinkQuality`, {
          params: {
            statisticsType: val
          }
        }).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.dataListLeft = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
        // window._api.apiThirdNetLinkQuality({ statisticsType: val }).then(res => {
        //   if (res.status === 0) {
        //     this.dataListLeft = res.data
        //   } else {
        //       this.$message.warning('数据异常')
        //   }
        // })
      },
      // 右表数据
      getTableRightData(val=10, dest='全部') {
        this.$axios.get(`${this.baseURL}/api/benchmarking/thirdNetWebLinkQuality`, {
          params: { statisticsType: val, destName: dest }
        }).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.dataListRight = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
        // window._api.apiThirdNetWebLinkQuality({ statisticsType: val, destName: dest }).then(res => {
        //   if (res.status === 0) {
        //     this.dataListRight = res.data
        //   } else {
        //     this.$message.warning('数据异常')
        //   }
        // })
      },
      // 拨测次数
      getTestCount() {
        this.$axios.get(`${this.baseURL}/api/benchmarking/getTestCount`).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.num = res.data.find(item => item.operator === 'ALL').test_count
            this.ltTestCount = res.data.find(item => item.operator === '联通').test_count
            this.dxTestCount = res.data.find(item => item.operator === '电信').test_count
            this.ydTestCount = res.data.find(item => item.operator === '移动').test_count
          } else {
            this.$message.warning('数据异常')
          }
        })
        // window._api.apiTestCount().then(res => {
        //   if (res.status === 0) {
        //     this.num = res.data.find(item => item.operator === 'ALL').test_count
        //     this.ltTestCount = res.data.find(item => item.operator === '联通').test_count
        //     this.dxTestCount = res.data.find(item => item.operator === '电信').test_count
        //     this.ydTestCount = res.data.find(item => item.operator === '移动').test_count
        //   } else {
        //     this.$message.warning('数据异常')
        //   }
        // })
      }
    }
  }
</script>
<style scope>
.common-mt2vh{
  margin-top: 2vh
}
.common-card{
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 8px 18px;
}
.navBar{
  top:1vh
}
.fiveContainer{
  display: flex;
  padding: 0 14px;
}
.tzNumber{
  text-align: center;
  color: #FFFFFF;
  height: 100%;
  border: 1px solid rgba(255,255,255, .1);
  background: linear-gradient(-113deg,#b5179e 1%,#7209b7 1%,#560bad,#480ca8,#3a0ca3,#3f37c9,#4361ee,#4895ef,#4cc9f0);
}
.tzNumberTitle{
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border-bottom: 1px solid #ffffff;
}
.tzNumberNum{
  height: 40px;
  line-height: 40px;
  font-size: 26px;
}
.tzNumberNum > span {
  font-size: 16px;
  padding-left: 4px;
}
.processWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 48px;
  width: calc(70% - 48px);
}
.pointWrap{
  position: relative;
  height: 48px;
  line-height: 48px;
  font-size: 20px;
  text-align: center;
}
.commonHeader {
  position: relative;
  display: flex;
  height: 6vh;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  color: #ffffff;
  letter-spacing: 2px;
  margin-bottom: 2vh;
}
@media only screen and (min-width: 1921px) {
  .commonHeader {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1920px) {
  .commonHeader {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1600px) {
  .commonHeader {
    font-size: 28px;
  }
  .imgHide{
    display: none;
  }
  .fiveCardTitle{
    /*font-size: 14px;*/
  }
}
.containerWrap{
  position: relative;
  height: 100vh;
  background: url("../../assets/images/bg.jpg") scroll center no-repeat;
  background-size: 100% 100%;
}
.fiveTableLeft{
  border-radius: 5px;
  background: rgba(14,22,95,0.4);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  border: 1px solid rgba(14,101,187,0.46);
  height: calc(56vh);
}
</style>

